<template>
    <div class="mr-root">
        <public-header>
            <i slot="icon" class="icon-chevron-left" @click="change"></i>
            <p slot="text" class="title">发布话题</p>
        </public-header>
        <div class="create-content">
            <form action="" @submit.prevent="btnClick">
                <div class="bankuai">
                    <span>选择板块：</span>
                    <select name="" id="" v-model="tab">
                        <option>请选择</option>
                        <option value="share">分享</option>
                        <option value="ask">问答</option>
                        <option value="job">招聘</option>
                    </select>
                </div>
                <input type="text" v-model="title" placeholder="请输入标题">
                <textarea name="" id="" cols="43" rows="25" v-model="content"></textarea>
                <button>提交</button>
            </form>   
        </div> 
    </div>
</template>

<script>
    import PublicHeader from '../components/Header'
    export default{
        components:{
            PublicHeader
        },
        data(){
            return{
                tab:'请选择',
                title:'',
                content:''
            }
        },
        methods:{
            change(){
                this.$router.go(-1)
            },
            btnClick(){
                var accesstoken=localStorage.getItem('accesstoken')
                // var data='accesstoken='+accesstoken+'&title='+this.title+'&tab='+this.tab+'&content='+this.content
                var data = {"title":this.title,"tab":this.tab,"content":this.content,"accesstoken":accesstoken}
                this.axios.post('/vueapi/v1/topics',data)
                .then(data=>{
                    console.log(data)
                    this.$router.push('/home')
                })
                .catch(err=>{
                    console.log(err)
                })
            }         
        }
    }
</script>

<style scoped>
    .icon-chevron-left{
        font-size: 18px;
        margin-left: 20px;
        color: #fff;
    }
    .create-content{
        padding: 64px 0 15px 15px;
    }
    .bankuai{
        font-size: 16px;
        margin-bottom: 20px;
    }
    select{
        width: 150px;
        height: 30px;
        outline: none;
    }
    input{
        width: 9rem;
        height: 30px;
        outline: none;
        margin-bottom: 20px;
    }
    textarea{
        padding: 10px;
        outline: none;
    }
    button{
        margin-top: 20px;
        width: 60px;
        height: 30px;
        outline: none;
        border: none;
        color: #fff;
        font-size: 16px;
        background: #0e77e4;
        border-radius: 8px;
    }
</style>